<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header-index.css">
    <link rel="stylesheet" href="../font/header-font/iconfont.css">
</head>
<body>
    <header>
        <div class="header-nav">
            <div class="header-site-nav">
                <div class="header-main">
                    <!-- 地区块 -->   
                    <div class="header-f1">
                        <div class="header-city-check">
                            <div class="header-f1-city">
                                <i>
                                    <img src="img/header-img/city-address.png" alt=""  width='25px' height='26px'>
                                </i>
                                <span class="header-address">郑州市</span>
                            </div>
                            <div class="header-city-mask"></div>
                            <div class="header-address-choose"></div>
                        </div>
                        <div class="header-f1-tetx-info">
                            <a href="#" class="header-a-red">请登录</a>
                            <a href="#">免费注册</a>
                        </div>
                    </div>
                    <!-- 头部右侧导航 -->
                    <ul>             
                        <li>
                            <div>
                                <a href="#">我的订单</a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#">我的浏览</a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#">我的收藏</a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#">客户服务</a>
                            </div>
                        </li>
                        <li class="header-list-last">
                            <div>
                                <a href="#">网站导航
                                    <i class="iconfont icon-xiala"></i> 
                                </a>
                                
                            </div>
                            <div class="header-list-mask"></div>
                            <div class="header-list-last-div">
                                <div class="header-list-last-div-l">
                                    <dl>
                                        <dt>特色主题</dt>
                                        <dd>
                                            <div>
                                                <a href="#">家用电器</a>
                                            </div>
                                            <div>
                                                <a href="#">男装女装</a>
                                            </div>
                                            <div>
                                                <a href="#">鞋靴箱包</a>
                                            </div>   
                                        </dd>
                                    </dl>
                                </div>
                                <div class="header-list-last-div-r">
                                    <dl>
                                        <dt>促销活动</dt>
                                        <dd>
                                            <div>
                                                <a href="#">拍卖活动</a>
                                            </div>
                                            <div>
                                                <a href="#">共创商品</a>
                                            </div>
                                            <div>
                                                <a href="#">积分商城</a>
                                            </div>
                                            <div>
                                                <a href="#">CMS频道</a>
                                            </div>
                                            <div>
                                                <a href="#">优惠活动</a>
                                            </div>
                                            <div>
                                                <a href="#">超值礼包</a>
                                            </div>
                                            <div>
                                                <a href="#">优惠券</a>
                                            </div>
                                            <div>
                                                <a href="#">礼品卡</a>
                                            </div>
                                            <div>
                                                <a href="#">预售商品</a>
                                            </div>
                                            
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 查询部分 -->
        <div class="header-w">
            <div class="header-logo">
                <a href="#">
                    <img src="img/header-img/shop_logo.gif" alt="" width="159px" height="57px">
                </a>
            </div>
            <div class="header-search">
                <div class="header-search-input">
                    <form action="post">
                        <input type="text" placeholder="内衣">
                        <button class="header-search-for">搜商品</button>
                        <button class="header-search-need">搜店铺</button>
                    </form>
                </div>
                <ul>
                    <li>
                        <a href="#">周大福</a>
                    </li>
                    <li>
                        <a href="#">内衣</a>
                    </li>
                    <li>
                        <a href="#">Five Plus</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                    </li>
                    
                </ul>
            </div>
            <div class="header-mycart">
                <div class="header-mycart-con">
                    <a href="#">
                        <i class="iconfont icon-gouwuchekong"></i>
                        <span>我的购物车</span>
                        <p>0</p>
                    </a>
                </div>
                <div class="header-mycart-mask"></div>
                <div class="header-mycart-buy">
                    <div>
                        <b></b>
                        <span>购物车中还没有商品，赶紧选购吧</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品分类导航 -->
        
        <div class="header-nav-list">
            <main>
                <div class="header-com-goods">全部商品分类</div>             <!--自行修改当前页面的分类  -->
                <!-- 记得加自己页面下的a标签加 class  header-nav-active -->
                <ul>            
                    <li>
                        <a href="#" class="header-nav-active">首页</a>
                    </li>
                    <li>
                        <a href="#">个户美妆</a>
                    </li>
                    <li>
                        <a href="#">服装城</a>
                    </li>
                    <li>
                        <a href="#">家用电器</a>
                    </li>
                    <li>
                        <a href="#">鞋靴箱包</a>
                    </li>
                    <li>
                        <a href="#">聚划算</a>
                    </li>
                    <li>
                        <a href="#">预售</a>
                    </li>
                    <li>
                        <a href="#">店铺街</a>
                    </li>
                    <li>
                        <a href="#">品牌专区</a>
                    </li>
                    <li>
                        <a href="#">公告</a>
                    </li>
                </ul>
            </main>
        </div>
    </header>
</body>
</html>